<template>
	<view class="warp">
		<view class="form">
			<view class="form_input">
				<view class="l_text">手机号码</view>
				<input class="input" type="text" v-model="phone" value="" placeholder="请输入手机号码"/>
				
			</view>
			<view class="form_input">
				<view class="l_text">验证码</view>
				<input class="input" type="text" v-model="veri" value="" placeholder="请输入验证码"/>
				<view class="btn" v-if="st" @click="timee()">获取验证码</view>
				<view class="btn" v-else>{{time}}s重新获取</view>
			</view>
			
			<view class="form_input">
				<view class="l_text">新密码</view>
				<input class="input" type="password" v-model="pwd" value="" placeholder="请输入密码"/>
			</view>
			<view class="form_input">
				<view class="l_text">确认密码</view>
				<input class="input" type="password" v-model="pwd_" value="" placeholder="请再次输入密码"/>
			</view>
			<view class="form_btn" @click="tijiao()" >提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				st:true,
				time:60,
				phone:'',
				veri:'',
				pwd:'',
				pwd_:'',
			};
		},
		methods:{
			//发送手机验证码
			timee(){
				if(!this.yanzhe_p()){
					uni.showToast({
						title:"请输入正确的手机号",
						icon:'none'
					})
					return  false;
				}
				var that = this
				that.st = false;
				var num = 60;
				var	t = setInterval(play, 1000);
				that.time = 60;
				function play(){
					num--;
					if(num == 0){
						clearInterval(t);
						that.st = true;
					}
					that.time = num;
				}
				this.$http.get('sendmsg/index',{'phone':this.phone}).
				then(function (response) {
					if(response.code==1){
						uni.setStorageSync('code',response.data)
					}else{
						uni.showToast({
							title:"系統錯誤",
							icon:'none'
						})
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			//验证手机号
			yanzhe_p(){
				var phoneReg = /^1[123456789]\d{9}$/;
				var phone =  this.phone.trim();
				if (!phoneReg.test(phone)) {
					return false;
				}else{
					return true;
				}
			},
			//提交表单
			tijiao(){
				if(this.phone.length==0 || this.veri.length==0 || this.pwd.length==0 || this.pwd_.length==0  ){
					uni.showToast({
						title:"请完善表单",
						icon:'none'
					})
					return false;
				}
				
				if(this.pwd.length < 6){
					uni.showToast({
						title:"密码最小六位",
						icon:'none'
					})
					return false;
				}
				if(!this.yanzhe_p()){
					uni.showToast({
						title:"请输入正确的手机号",
						icon:'none'
					})
					return  false;
				}
				var veri = this.veri
				if(veri.length == 0){
					uni.showToast({
						title:"请输入验证码",
						icon:'none'
					})
					return false;
				}
				if(uni.getStorageSync('code') != veri ){
					uni.showToast({
						title:"验证码不正确",
						icon:'none'
					})
					return false;
				}
				if( this.pwd !=  this.pwd_){
					uni.showToast({
						title:"两次密码不一致",
						icon:'none'
					})
					return false;
				}
				var that=this;
				this.$http.get('login/editErjipass',{
					'phone':this.phone,
					'veri':this.veri,
					'pwd':this.pwd
				}).
				then(function (response) {
					uni.showToast({
						title:"支付密码修改成功请重新登录",
						icon:'none'
					})
					 setTimeout(function() {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 1500);
				}).catch(function (error) {
					console.log(error);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp{
		width: 100%;
		.form{
			padding: 0 20rpx;
			.form_input{
				display: flex;
				height: 100rpx;
				border-bottom: 1px solid #ebebeb;
				align-items: center;
				.l_text{
					font-size: 30rpx;
					color: #3b3b3b;
					width: 120rpx;
					display: block;
					text-align:justify;
					text-align-last:justify;
				}
				.input{
					flex: 1;
					overflow: hidden;
					height: 100%;
					font-size: 30rpx;
					margin-left: 30rpx;
				}
				.btn{
					width: 150rpx;
					height: 60rpx;
					font-size: 26rpx;
					color: #fff;
					background: #284179;
					border-radius: 5rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
			.form_btn{
				width: 650rpx;
				height: 90rpx;
				border-radius: 45rpx;
				background: #284179;
				text-align: center;
				line-height: 90rpx;
				font-size: 32rpx;
				color: #fff;
				margin: 170rpx auto 0;
			}
		}
	}
</style>
